<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '客诉',
			size: '40%',
			appendToBody: true
		}"
		showConfirm
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-form-item label="基本信息">
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="客户" prop="cus_name">
								<el-input v-model="info.cus_name" disabled />
							</el-form-item>
						</el-col>

						<el-col :span="24">
							<el-form-item label="类型" prop="type">
								<cl-select
									v-model="form.type"
									placeholder="请选择类型"
									style="width: 100%"
								>
									<el-option label="建议" :value="1" />
									<el-option label="投诉" :value="2" />
								</cl-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form-item>
			<el-form-item label="您的建议/投诉" prop="content">
				<el-input
					v-model="form.content"
					placeholder="请填定原因"
					type="textarea"
					:rows="5"
					style="margin-bottom: 15px"
				/>
			</el-form-item>
			<el-form-item label="上传凭证">
				<cl-upload
					multiple
					:limit="5"
					:limit-size="3"
					list-type="picture-card"
					ref="uploads"
					v-model="img"
					:on-success="onUploadSuccess"
				/>
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>
<script>
	import dayjs from "dayjs";
	import { delEmptyChildren } from "@/utils";
	export default {
		data() {
			return {
				info: {},
				form: {
					type: "",
					content: ""
				},
				rules: {
					type: [{ required: true, message: "请选择类型" }],
					content: [{ required: true, message: "请填定原因" }]
				},
				saving: false,
				img: []
			};
		},
		methods: {
			open(row) {
				this.$refs.drawer.create(() => {
					console.log(row);
					this.info = row;
					this.form.cus_id = this.info.cus_id
				});
			},
			close() {
				this.$refs.drawer.close();
			},
			onUploadSuccess(res) {
				// this.img.push(res.data)
				console.log(res);
			},
			reset() {
				this.$refs.form.resetFields();
				this.img = []
			},

			submit() {
				this.$refs.form.validate(async (valid, errors) => {
					this.showFormErr(errors);
					if (!valid) return;
					let { ...args } = this.form;
					let form = {
						...args,
						img: this.img,
						source:2
					};
					this.saving = true;
					await this.$service.customer.compl(form).done(() => {
						this.saving = false;
					});
					this.$message.success("操作成功");
					this.$emit("confirm");
					this.close();
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.refundtotal {
		font-size: 14px;
		color: #555555;
		margin-right: 10px;
		&.f-12 {
			font-size: 12px;
			color: #d9d9d9;
		}
	}
</style>









